ક્રિટિકલ રેન્ડરિંગ પાથનું વિશ્લેષણ અને ઑપ્ટિમાઇઝ કરીને વેબ પર્ફોર્મન્સમાં નિપુણતા મેળવો. જાવાસ્ક્રિપ્ટ રેન્ડરિંગને કેવી રીતે અસર કરે છે અને તેને કેવી રીતે સુધારવું તે અંગે ડેવલપર્સ માટે એક વિસ્તૃત માર્ગદર્શિકા.
જાવાસ્ક્રિપ્ટ પર્ફોર્મન્સ ઓપ્ટિમાઇઝેશન: ક્રિટિકલ રેન્ડરિંગ પાથનું ઊંડાણપૂર્વક વિશ્લેષણ
વેબ ડેવલપમેન્ટની દુનિયામાં, ઝડપ માત્ર એક સુવિધા નથી; તે સારા વપરાશકર્તા અનુભવનો પાયો છે. ધીમી લોડ થતી વેબસાઇટ ઉચ્ચ બાઉન્સ રેટ, ઓછા કન્વર્ઝન અને નિરાશ પ્રેક્ષકો તરફ દોરી શકે છે. જ્યારે વેબ પર્ફોર્મન્સમાં ઘણા પરિબળો ફાળો આપે છે, ત્યારે સૌથી મૂળભૂત અને ઘણીવાર ગેરસમજ થતી વિભાવનાઓમાંની એક છે ક્રિટિકલ રેન્ડરિંગ પાથ (CRP). બ્રાઉઝર્સ કન્ટેન્ટ કેવી રીતે રેન્ડર કરે છે અને, વધુ મહત્ત્વની વાત એ છે કે, જાવાસ્ક્રિપ્ટ આ પ્રક્રિયા સાથે કેવી રીતે ક્રિયાપ્રતિક્રિયા કરે છે તે સમજવું પર્ફોર્મન્સ વિશે ગંભીર કોઈપણ ડેવલપર માટે સર્વોપરી છે.
આ વ્યાપક માર્ગદર્શિકા તમને ક્રિટિકલ રેન્ડરિંગ પાથમાં ઊંડાણપૂર્વક લઈ જશે, ખાસ કરીને જાવાસ્ક્રિપ્ટની ભૂમિકા પર ધ્યાન કેન્દ્રિત કરશે. અમે તેનું વિશ્લેષણ કેવી રીતે કરવું, અવરોધોને કેવી રીતે ઓળખવા, અને શક્તિશાળી ઓપ્ટિમાઇઝેશન તકનીકો કેવી રીતે લાગુ કરવી તે શોધીશું જે તમારી વેબ એપ્લિકેશન્સને વૈશ્વિક વપરાશકર્તા આધાર માટે વધુ ઝડપી અને વધુ પ્રતિભાવશીલ બનાવશે.
ક્રિટિકલ રેન્ડરિંગ પાથ શું છે?
ક્રિટિકલ રેન્ડરિંગ પાથ એ પગલાંનો ક્રમ છે જે બ્રાઉઝરે HTML, CSS, અને જાવાસ્ક્રિપ્ટને સ્ક્રીન પર દૃશ્યમાન પિક્સેલ્સમાં રૂપાંતરિત કરવા માટે લેવા જોઈએ. CRP ઓપ્ટિમાઇઝેશનનો પ્રાથમિક ધ્યેય પ્રારંભિક, "above-the-fold" કન્ટેન્ટને વપરાશકર્તાને શક્ય તેટલી ઝડપથી રેન્ડર કરવાનો છે. આ જેટલી ઝડપથી થાય છે, તેટલી ઝડપથી વપરાશકર્તાને પેજ લોડ થતું હોવાનો અનુભવ થાય છે.
આ પાથમાં ઘણા મુખ્ય તબક્કાઓ છે:
- DOM કન્સ્ટ્રક્શન: આ પ્રક્રિયા ત્યારે શરૂ થાય છે જ્યારે બ્રાઉઝર સર્વરથી HTML ડોક્યુમેન્ટની પ્રથમ બાઇટ્સ મેળવે છે. તે HTML માર્કઅપને અક્ષર-અક્ષર પાર્સ કરવાનું શરૂ કરે છે, અને ડોક્યુમેન્ટ ઓબ્જેક્ટ મોડલ (DOM) બનાવે છે. DOM એ એક વૃક્ષ જેવી રચના છે જે HTML ડોક્યુમેન્ટમાંના બધા નોડ્સ (તત્વો, વિશેષતાઓ, ટેક્સ્ટ)નું પ્રતિનિધિત્વ કરે છે.
- CSSOM કન્સ્ટ્રક્શન: જેમ જેમ બ્રાઉઝર DOM બનાવે છે, જો તેને CSS સ્ટાઇલશીટ (
<link>ટેગમાં અથવા ઇનલાઇન<style>બ્લોકમાં) મળે છે, તો તે CSS ઓબ્જેક્ટ મોડલ (CSSOM) બનાવવાનું શરૂ કરે છે. DOM ની જેમ, CSSOM એ એક વૃક્ષ જેવી રચના છે જેમાં પેજ માટેની બધી સ્ટાઇલ્સ અને તેમના સંબંધો હોય છે. HTMLથી વિપરીત, CSS ડિફૉલ્ટ રૂપે render-blocking છે. બ્રાઉઝર જ્યાં સુધી બધી CSS ડાઉનલોડ અને પાર્સ ન કરી લે ત્યાં સુધી પેજનો કોઈપણ ભાગ રેન્ડર કરી શકતું નથી, કારણ કે પાછળની સ્ટાઇલ્સ પહેલાની સ્ટાઇલ્સને ઓવરરાઇડ કરી શકે છે. - રેન્ડર ટ્રી કન્સ્ટ્રક્શન: એકવાર DOM અને CSSOM બંને તૈયાર થઈ જાય, ત્યારે બ્રાઉઝર તેમને જોડીને રેન્ડર ટ્રી બનાવે છે. આ ટ્રીમાં ફક્ત તે જ નોડ્સ હોય છે જે પેજને રેન્ડર કરવા માટે જરૂરી છે. ઉદાહરણ તરીકે,
display: none;વાળા તત્વો અને<head>ટેગ રેન્ડર ટ્રીમાં શામેલ નથી કારણ કે તે દૃષ્ટિગત રીતે રેન્ડર થતા નથી. રેન્ડર ટ્રી જાણે છે કે શું પ્રદર્શિત કરવું, પરંતુ ક્યાં અથવા કેટલું મોટું તે નહીં. - લેઆઉટ (અથવા રિફ્લો): રેન્ડર ટ્રી બન્યા પછી, બ્રાઉઝર લેઆઉટ તબક્કામાં આગળ વધે છે. આ પગલામાં, તે વ્યુપોર્ટના સંબંધમાં રેન્ડર ટ્રીના દરેક નોડનું ચોક્કસ કદ અને સ્થાન ગણે છે. આ તબક્કાનું આઉટપુટ એક "box model" છે જે પેજ પરના દરેક તત્વની ચોક્કસ ભૂમિતિને કેપ્ચર કરે છે.
- પેઇન્ટ: છેવટે, બ્રાઉઝર લેઆઉટ માહિતી લે છે અને દરેક નોડ માટે પિક્સેલ્સને સ્ક્રીન પર "પેઇન્ટ" કરે છે. આમાં ટેક્સ્ટ, રંગો, છબીઓ, બોર્ડર્સ અને પડછાયાઓ દોરવાનો સમાવેશ થાય છે - અનિવાર્યપણે પેજના દરેક દ્રશ્ય ભાગને રાસ્ટરાઇઝ કરવું. કાર્યક્ષમતા સુધારવા માટે આ પ્રક્રિયા બહુવિધ સ્તરો પર થઈ શકે છે.
- કમ્પોઝિટ: જો પેજ કન્ટેન્ટને બહુવિધ સ્તરો પર પેઇન્ટ કરવામાં આવ્યું હોય, તો બ્રાઉઝરે સ્ક્રીન પર અંતિમ છબી પ્રદર્શિત કરવા માટે આ સ્તરોને સાચા ક્રમમાં કમ્પોઝિટ કરવા જોઈએ. આ પગલું ખાસ કરીને એનિમેશન અને સ્ક્રોલિંગ માટે મહત્વપૂર્ણ છે, કારણ કે કમ્પોઝિટિંગ સામાન્ય રીતે લેઆઉટ અને પેઇન્ટ તબક્કાઓને ફરીથી ચલાવવા કરતાં ઓછું ગણતરીની દ્રષ્ટિએ ખર્ચાળ છે.
ક્રિટિકલ રેન્ડરિંગ પાથમાં જાવાસ્ક્રિપ્ટની વિક્ષેપકારક ભૂમિકા
તો આ ચિત્રમાં જાવાસ્ક્રિપ્ટ ક્યાં બંધબેસે છે? જાવાસ્ક્રિપ્ટ એક શક્તિશાળી ભાષા છે જે DOM અને CSSOM બંનેને સંશોધિત કરી શકે છે. જોકે, આ શક્તિ એક કિંમત સાથે આવે છે. જાવાસ્ક્રિપ્ટ ક્રિટિકલ રેન્ડરિંગ પાથને અવરોધિત કરી શકે છે, અને ઘણીવાર કરે છે, જે રેન્ડરિંગમાં નોંધપાત્ર વિલંબ તરફ દોરી જાય છે.
પાર્સર-બ્લોકિંગ જાવાસ્ક્રિપ્ટ
ડિફૉલ્ટ રૂપે, જાવાસ્ક્રિપ્ટ પાર્સર-બ્લોકિંગ છે. જ્યારે બ્રાઉઝરનું HTML પાર્સર <script> ટેગનો સામનો કરે છે, ત્યારે તેણે DOM બનાવવાની તેની પ્રક્રિયાને રોકવી પડે છે. તે પછી જાવાસ્ક્રિપ્ટ ફાઇલને ડાઉનલોડ કરવા (જો બાહ્ય હોય તો), પાર્સ કરવા અને એક્ઝિક્યુટ કરવા આગળ વધે છે. આ પ્રક્રિયા બ્લોકિંગ છે કારણ કે સ્ક્રિપ્ટ document.write() જેવું કંઈક કરી શકે છે, જે સમગ્ર DOM માળખાને બદલી શકે છે. બ્રાઉઝર પાસે સ્ક્રિપ્ટ સમાપ્ત થાય તેની રાહ જોયા સિવાય કોઈ વિકલ્પ નથી જેથી તે સુરક્ષિત રીતે HTML પાર્સિંગ ફરી શરૂ કરી શકે.
જો આ સ્ક્રિપ્ટ તમારા ડોક્યુમેન્ટના <head> માં સ્થિત છે, તો તે શરૂઆતમાં જ DOM કન્સ્ટ્રક્શનને અવરોધે છે. આનો અર્થ એ છે કે બ્રાઉઝર પાસે રેન્ડર કરવા માટે કોઈ કન્ટેન્ટ નથી, અને વપરાશકર્તા સ્ક્રિપ્ટ સંપૂર્ણપણે પ્રોસેસ ન થાય ત્યાં સુધી ખાલી સફેદ સ્ક્રીન પર જોતો રહે છે. આ ખરાબ અનુભવાયેલ પર્ફોર્મન્સનું મુખ્ય કારણ છે.
DOM અને CSSOM મેનિપ્યુલેશન
જાવાસ્ક્રિપ્ટ CSSOM ને ક્વેરી અને સંશોધિત પણ કરી શકે છે. દાખલા તરીકે, જો તમારી સ્ક્રિપ્ટ element.style.width જેવી ગણતરી કરેલ સ્ટાઇલ માટે પૂછે છે, તો બ્રાઉઝરે સાચો જવાબ આપવા માટે પહેલા ખાતરી કરવી આવશ્યક છે કે બધી CSS ડાઉનલોડ અને પાર્સ થઈ ગઈ છે. આ તમારી જાવાસ્ક્રિપ્ટ અને તમારી CSS વચ્ચે એક નિર્ભરતા બનાવે છે, જ્યાં સ્ક્રિપ્ટ એક્ઝિક્યુશન CSSOM તૈયાર થવાની રાહ જોવામાં અવરોધિત થઈ શકે છે.
વધુમાં, જો જાવાસ્ક્રિપ્ટ DOM (દા.ત., તત્વ ઉમેરે છે અથવા દૂર કરે છે) અથવા CSSOM (દા.ત., ક્લાસ બદલે છે) ને સંશોધિત કરે છે, તો તે બ્રાઉઝરના કામનો કાસ્કેડ ટ્રિગર કરી શકે છે. એક ફેરફાર બ્રાઉઝરને લેઆઉટ (એક રિફ્લો) ની પુનઃ ગણતરી કરવા અને પછી સ્ક્રીનના અસરગ્રસ્ત ભાગોને, અથવા તો આખા પેજને ફરીથી પેઇન્ટ કરવા માટે દબાણ કરી શકે છે. વારંવાર અથવા ખરાબ સમયે થતા મેનિપ્યુલેશન્સ સુસ્ત, બિનપ્રતિભાવશીલ યુઝર ઇન્ટરફેસ તરફ દોરી શકે છે.
ક્રિટિકલ રેન્ડરિંગ પાથનું વિશ્લેષણ કેવી રીતે કરવું
તમે ઓપ્ટિમાઇઝ કરો તે પહેલાં, તમારે પહેલા માપવું આવશ્યક છે. બ્રાઉઝર ડેવલપર ટૂલ્સ CRPનું વિશ્લેષણ કરવા માટે તમારા શ્રેષ્ઠ મિત્ર છે. ચાલો ક્રોમ ડેવટૂલ્સ પર ધ્યાન કેન્દ્રિત કરીએ, જે આ હેતુ માટે સાધનોનો એક શક્તિશાળી સ્યુટ પ્રદાન કરે છે.
પર્ફોર્મન્સ ટેબનો ઉપયોગ કરવો
પર્ફોર્મન્સ ટેબ તમારું પેજ રેન્ડર કરવા માટે બ્રાઉઝર જે કંઈ પણ કરે છે તેની વિગતવાર સમયરેખા પ્રદાન કરે છે.
- ક્રોમ ડેવટૂલ્સ ખોલો (Ctrl+Shift+I અથવા Cmd+Option+I).
- પર્ફોર્મન્સ ટેબ પર જાઓ.
- ખાતરી કરો કે "Web Vitals" ચેકબોક્સ ટિક કરેલું છે જેથી સમયરેખા પર મુખ્ય મેટ્રિક્સ જોઈ શકાય.
- પેજ લોડનું પ્રોફાઇલિંગ શરૂ કરવા માટે રીલોડ બટન પર ક્લિક કરો (અથવા Ctrl+Shift+E / Cmd+Shift+E દબાવો).
પેજ લોડ થયા પછી, તમને એક ફ્લેમ ચાર્ટ રજૂ કરવામાં આવશે. મુખ્ય (Main) થ્રેડ વિભાગમાં શું જોવું તે અહીં છે:
- લાંબા ટાસ્ક (Long Tasks): 50 મિલિસેકન્ડથી વધુ સમય લેતા કોઈપણ ટાસ્કને લાલ ત્રિકોણથી ચિહ્નિત કરવામાં આવે છે. આ ઓપ્ટિમાઇઝેશન માટે મુખ્ય ઉમેદવારો છે કારણ કે તે મુખ્ય થ્રેડને અવરોધે છે અને UI ને બિનપ્રતિભાવશીલ બનાવી શકે છે.
- પાર્સ HTML (વાદળી): આ બતાવે છે કે બ્રાઉઝર તમારું HTML ક્યાં પાર્સ કરી રહ્યું છે. જો તમને મોટા ગાબડા અથવા વિક્ષેપો દેખાય, તો તે સંભવતઃ બ્લોકિંગ સ્ક્રિપ્ટને કારણે છે.
- સ્ક્રિપ્ટનું મૂલ્યાંકન (પીળો): આ તે સ્થાન છે જ્યાં જાવાસ્ક્રિપ્ટ એક્ઝિક્યુટ થઈ રહી છે. લાંબા પીળા બ્લોક્સ માટે જુઓ, ખાસ કરીને પેજ લોડની શરૂઆતમાં. આ તમારી બ્લોકિંગ સ્ક્રિપ્ટ્સ છે.
- સ્ટાઇલની પુનઃગણતરી (જાંબલી): આ CSSOM કન્સ્ટ્રક્શન અને સ્ટાઇલની ગણતરીઓ સૂચવે છે.
- લેઆઉટ (જાંબલી): આ બ્લોક્સ લેઆઉટ અથવા રિફ્લો તબક્કાનું પ્રતિનિધિત્વ કરે છે. જો તમને આમાંથી ઘણા દેખાય, તો તમારી જાવાસ્ક્રિપ્ટ વારંવાર ભૌમિતિક ગુણધર્મો વાંચીને અને લખીને "layout thrashing"નું કારણ બની શકે છે.
- પેઇન્ટ (લીલો): આ પેઇન્ટિંગ પ્રક્રિયા છે.
નેટવર્ક ટેબનો ઉપયોગ કરવો
નેટવર્ક ટેબનો વોટરફોલ ચાર્ટ રિસોર્સ ડાઉનલોડના ક્રમ અને અવધિને સમજવા માટે અમૂલ્ય છે.
- ડેવટૂલ્સ ખોલો અને નેટવર્ક ટેબ પર જાઓ.
- પેજ રીલોડ કરો.
- વોટરફોલ વ્યૂ તમને બતાવે છે કે દરેક રિસોર્સ (HTML, CSS, JS, છબીઓ) ક્યારે વિનંતી કરવામાં આવી અને ડાઉનલોડ કરવામાં આવી.
વોટરફોલની ટોચ પરની વિનંતીઓ પર ધ્યાન આપો. તમે પેજ રેન્ડર થવાનું શરૂ થાય તે પહેલાં ડાઉનલોડ થઈ રહેલી CSS અને જાવાસ્ક્રિપ્ટ ફાઇલોને સરળતાથી શોધી શકો છો. આ તમારા રેન્ડર-બ્લોકિંગ રિસોર્સિસ છે.
લાઇટહાઉસનો ઉપયોગ કરવો
લાઇટહાઉસ એ ક્રોમ ડેવટૂલ્સમાં બનેલું એક સ્વચાલિત ઓડિટિંગ ટૂલ છે (લાઇટહાઉસ ટેબ હેઠળ). તે ઉચ્ચ-સ્તરનો પર્ફોર્મન્સ સ્કોર અને કાર્યવાહી કરવા યોગ્ય ભલામણો પ્રદાન કરે છે.
CRP માટે એક મુખ્ય ઓડિટ છે "Eliminate render-blocking resources." આ રિપોર્ટ સ્પષ્ટપણે તે CSS અને જાવાસ્ક્રિપ્ટ ફાઇલોની યાદી આપશે જે ફર્સ્ટ કન્ટેન્ટફુલ પેઇન્ટ (FCP)માં વિલંબ કરી રહી છે, જે તમને ઓપ્ટિમાઇઝેશન માટેના લક્ષ્યોની સ્પષ્ટ સૂચિ આપશે.
જાવાસ્ક્રિપ્ટ માટે મુખ્ય ઓપ્ટિમાઇઝેશન વ્યૂહરચનાઓ
હવે જ્યારે આપણે સમસ્યાઓ કેવી રીતે ઓળખવી તે જાણીએ છીએ, ચાલો ઉકેલો શોધીએ. ધ્યેય એ જાવાસ્ક્રિપ્ટની માત્રાને ઘટાડવાનો છે જે પ્રારંભિક રેન્ડરને અવરોધે છે.
1. `async` અને `defer` ની શક્તિ
જાવાસ્ક્રિપ્ટને HTML પાર્સરને અવરોધતા અટકાવવાનો સૌથી સરળ અને સૌથી અસરકારક રસ્તો તમારા <script> ટેગ્સ પર `async` અને `defer` વિશેષતાઓનો ઉપયોગ કરવાનો છે.
- સ્ટાન્ડર્ડ
<script>:<script src="script.js"></script>
જેમ આપણે ચર્ચા કરી છે, આ પાર્સર-બ્લોકિંગ છે. HTML પાર્સિંગ અટકી જાય છે, સ્ક્રિપ્ટ ડાઉનલોડ અને એક્ઝિક્યુટ થાય છે, અને પછી પાર્સિંગ ફરી શરૂ થાય છે. <script async>:<script src="script.js" async></script>
સ્ક્રિપ્ટ અસિંક્રોનસ રીતે, HTML પાર્સિંગની સમાંતર ડાઉનલોડ થાય છે. જેવી સ્ક્રિપ્ટ ડાઉનલોડ થવાનું સમાપ્ત થાય છે, HTML પાર્સિંગ થોભાવવામાં આવે છે, અને સ્ક્રિપ્ટ એક્ઝિક્યુટ થાય છે. એક્ઝિક્યુશનનો ક્રમ ગેરંટી નથી; સ્ક્રિપ્ટ્સ ઉપલબ્ધ થતાં જ એક્ઝિક્યુટ થાય છે. આ સ્વતંત્ર, તૃતીય-પક્ષ સ્ક્રિપ્ટ્સ માટે શ્રેષ્ઠ છે જે DOM અથવા અન્ય સ્ક્રિપ્ટ્સ પર આધાર રાખતી નથી, જેમ કે એનાલિટિક્સ અથવા એડ સ્ક્રિપ્ટ્સ.<script defer>:<script src="script.js" defer></script>
સ્ક્રિપ્ટ અસિંક્રોનસ રીતે, HTML પાર્સિંગની સમાંતર ડાઉનલોડ થાય છે. જોકે, સ્ક્રિપ્ટ ફક્ત HTML ડોક્યુમેન્ટ સંપૂર્ણપણે પાર્સ થઈ ગયા પછી (DOMContentLoadedઇવેન્ટના તરત પહેલા) એક્ઝિક્યુટ થાય છે. `defer` વાળી સ્ક્રિપ્ટ્સ ડોક્યુમેન્ટમાં દેખાય તે ક્રમમાં એક્ઝિક્યુટ થવાની ગેરંટી પણ છે. આ મોટાભાગની સ્ક્રિપ્ટ્સ માટે પસંદગીની પદ્ધતિ છે જેને DOM સાથે ક્રિયાપ્રતિક્રિયા કરવાની જરૂર હોય છે અને પ્રારંભિક પેઇન્ટ માટે નિર્ણાયક નથી.
સામાન્ય નિયમ: તમારી મુખ્ય એપ્લિકેશન સ્ક્રિપ્ટ્સ માટે `defer` નો ઉપયોગ કરો. સ્વતંત્ર તૃતીય-પક્ષ સ્ક્રિપ્ટ્સ માટે `async` નો ઉપયોગ કરો. <head> માં બ્લોકિંગ સ્ક્રિપ્ટ્સનો ઉપયોગ કરવાનું ટાળો સિવાય કે તે પ્રારંભિક રેન્ડર માટે સંપૂર્ણપણે આવશ્યક હોય.
2. કોડ સ્પ્લિટિંગ
આધુનિક વેબ એપ્લિકેશન્સને ઘણીવાર એક જ, મોટી જાવાસ્ક્રિપ્ટ ફાઇલમાં બંડલ કરવામાં આવે છે. જ્યારે આ HTTP વિનંતીઓની સંખ્યા ઘટાડે છે, તે વપરાશકર્તાને ઘણો કોડ ડાઉનલોડ કરવા દબાણ કરે છે જે પ્રારંભિક પેજ વ્યૂ માટે જરૂરી ન પણ હોય.
કોડ સ્પ્લિટિંગ એ તે મોટા બંડલને નાના ટુકડાઓમાં તોડવાની પ્રક્રિયા છે જેને માંગ પર લોડ કરી શકાય છે. ઉદાહરણ તરીકે:
- પ્રારંભિક ચંક (Initial Chunk): તેમાં ફક્ત વર્તમાન પેજના દૃશ્યમાન ભાગને રેન્ડર કરવા માટે જરૂરી જાવાસ્ક્રિપ્ટ હોય છે.
- ઓન-ડિમાન્ડ ચંક્સ (On-Demand Chunks): તેમાં અન્ય રૂટ્સ, મોડલ્સ, અથવા below-the-fold સુવિધાઓ માટેનો કોડ હોય છે. આ ત્યારે જ લોડ થાય છે જ્યારે વપરાશકર્તા તે રૂટ પર નેવિગેટ કરે છે અથવા સુવિધા સાથે ક્રિયાપ્રતિક્રિયા કરે છે.
વેબપેક (Webpack), રોલઅપ (Rollup), અને પાર્સલ (Parcel) જેવા આધુનિક બંડલર્સમાં ડાયનેમિક `import()` સિન્ટેક્સનો ઉપયોગ કરીને કોડ સ્પ્લિટિંગ માટે બિલ્ટ-ઇન સપોર્ટ હોય છે. રિએક્ટ (`React.lazy` સાથે) અને વ્યુ જેવા ફ્રેમવર્ક પણ કમ્પોનન્ટ સ્તરે કોડને વિભાજીત કરવાના સરળ રસ્તાઓ પ્રદાન કરે છે.
3. ટ્રી શેકિંગ અને ડેડ કોડ એલિમિનેશન
કોડ સ્પ્લિટિંગ સાથે પણ, તમારા પ્રારંભિક બંડલમાં એવો કોડ હોઈ શકે છે જે ખરેખર ઉપયોગમાં લેવાતો નથી. આ સામાન્ય છે જ્યારે તમે લાઇબ્રેરીઓ ઇમ્પોર્ટ કરો છો પરંતુ તેમાંથી ફક્ત એક નાનો ભાગ જ વાપરો છો.
ટ્રી શેકિંગ (Tree Shaking) એ આધુનિક બંડલર્સ દ્વારા તમારા અંતિમ બંડલમાંથી બિનઉપયોગી કોડને દૂર કરવા માટે વપરાતી પ્રક્રિયા છે. તે તમારા `import` અને `export` સ્ટેટમેન્ટનું સ્થિર રીતે વિશ્લેષણ કરે છે અને નક્કી કરે છે કે કયો કોડ અપ્રાપ્ય છે. તમારા વપરાશકર્તાઓને ફક્ત જરૂરી કોડ જ મોકલીને, તમે બંડલના કદને નોંધપાત્ર રીતે ઘટાડી શકો છો, જે ઝડપી ડાઉનલોડ અને પાર્સિંગ સમય તરફ દોરી જાય છે.
4. મિનિફિકેશન અને કમ્પ્રેશન
આ કોઈપણ પ્રોડક્શન વેબસાઇટ માટે મૂળભૂત પગલાં છે.
- મિનિફિકેશન (Minification): આ એક સ્વચાલિત પ્રક્રિયા છે જે તમારા કોડમાંથી બિનજરૂરી અક્ષરો—જેમ કે વ્હાઇટસ્પેસ, ટિપ્પણીઓ અને નવી લાઇન્સ—દૂર કરે છે અને ચલના નામો ટૂંકા કરે છે, તેની કાર્યક્ષમતા બદલ્યા વિના. આ ફાઇલનું કદ ઘટાડે છે. ટર્સર (જાવાસ્ક્રિપ્ટ માટે) અને cssnano (CSS માટે) જેવા સાધનોનો સામાન્ય રીતે ઉપયોગ થાય છે.
- કમ્પ્રેશન (Compression): મિનિફિકેશન પછી, તમારા સર્વરે ફાઇલોને બ્રાઉઝરને મોકલતા પહેલા તેને કમ્પ્રેસ કરવી જોઈએ. Gzip અને, વધુ અસરકારક રીતે, Brotli જેવા અલ્ગોરિધમ્સ ફાઇલના કદને 70-80% સુધી ઘટાડી શકે છે. બ્રાઉઝર પછી તેને પ્રાપ્ત કર્યા પછી ડિકમ્પ્રેસ કરે છે. આ એક સર્વર કન્ફિગરેશન છે, પરંતુ તે નેટવર્ક ટ્રાન્સફર સમય ઘટાડવા માટે નિર્ણાયક છે.
5. ક્રિટિકલ જાવાસ્ક્રિપ્ટને ઇનલાઇન કરવી (સાવધાની સાથે ઉપયોગ કરો)
જાવાસ્ક્રિપ્ટના ખૂબ નાના ટુકડાઓ માટે જે પ્રથમ પેઇન્ટ માટે સંપૂર્ણપણે આવશ્યક છે (દા.ત., થીમ સેટ કરવી અથવા ક્રિટિકલ પોલીફિલ), તમે તેને સીધા તમારા HTMLમાં <head> માં <script> ટેગની અંદર ઇનલાઇન કરી શકો છો. આ એક નેટવર્ક વિનંતી બચાવે છે, જે ઉચ્ચ-લેટન્સી મોબાઇલ કનેક્શન્સ પર ફાયદાકારક હોઈ શકે છે. જોકે, આનો ઓછો ઉપયોગ કરવો જોઈએ. ઇનલાઇન કરેલ કોડ તમારા HTML ડોક્યુમેન્ટનું કદ વધારે છે અને બ્રાઉઝર દ્વારા અલગથી કેશ કરી શકાતો નથી. તે એક સમાધાન છે જે કાળજીપૂર્વક ધ્યાનમાં લેવું જોઈએ.
અદ્યતન તકનીકો અને આધુનિક અભિગમો
સર્વર-સાઇડ રેન્ડરિંગ (SSR) અને સ્ટેટિક સાઇટ જનરેશન (SSG)
Next.js (રિએક્ટ માટે), Nuxt.js (વ્યુ માટે), અને SvelteKit જેવા ફ્રેમવર્ક્સે SSR અને SSG ને લોકપ્રિય બનાવ્યા છે. આ તકનીકો પ્રારંભિક રેન્ડરિંગ કાર્યને ક્લાયન્ટના બ્રાઉઝરથી સર્વર પર ઓફલોડ કરે છે.
- SSR: સર્વર વિનંતી કરેલા પેજ માટે સંપૂર્ણ HTML રેન્ડર કરે છે અને તેને બ્રાઉઝરને મોકલે છે. બ્રાઉઝર આ HTML ને તરત જ પ્રદર્શિત કરી શકે છે, જે ખૂબ જ ઝડપી ફર્સ્ટ કન્ટેન્ટફુલ પેઇન્ટમાં પરિણમે છે. જાવાસ્ક્રિપ્ટ પછી લોડ થાય છે અને પેજને "હાઇડ્રેટ" કરે છે, તેને ઇન્ટરેક્ટિવ બનાવે છે.
- SSG: દરેક પેજ માટે HTML બિલ્ડ સમયે જનરેટ થાય છે. જ્યારે વપરાશકર્તા પેજની વિનંતી કરે છે, ત્યારે CDN માંથી તરત જ એક સ્ટેટિક HTML ફાઇલ પીરસવામાં આવે છે. કન્ટેન્ટ-ભારે સાઇટ્સ માટે આ સૌથી ઝડપી અભિગમ છે.
SSR અને SSG બંને મોટાભાગની ક્લાયન્ટ-સાઇડ જાવાસ્ક્રિપ્ટ એક્ઝિક્યુટ થવાનું શરૂ થાય તે પહેલાં જ એક અર્થપૂર્ણ પ્રથમ પેઇન્ટ પહોંચાડીને CRP પર્ફોર્મન્સમાં નાટકીય રીતે સુધારો કરે છે.
વેબ વર્કર્સ
જો તમારી એપ્લિકેશનને ભારે, લાંબા સમય સુધી ચાલતી ગણતરીઓ (જેમ કે જટિલ ડેટા વિશ્લેષણ, છબી પ્રક્રિયા, અથવા ક્રિપ્ટોગ્રાફી) કરવાની જરૂર હોય, તો આને મુખ્ય થ્રેડ પર કરવાથી રેન્ડરિંગ અવરોધિત થશે અને તમારું પેજ થીજી ગયેલું લાગશે. વેબ વર્કર્સ (Web Workers) આ સ્ક્રિપ્ટ્સને બેકગ્રાઉન્ડ થ્રેડમાં ચલાવવાની મંજૂરી આપીને એક ઉકેલ પૂરો પાડે છે, જે મુખ્ય UI થ્રેડથી સંપૂર્ણપણે અલગ છે. આ તમારી એપ્લિકેશનને પ્રતિભાવશીલ રાખે છે જ્યારે ભારે કામ પડદા પાછળ થાય છે.
CRP ઓપ્ટિમાઇઝેશન માટે એક વ્યવહારુ વર્કફ્લો
ચાલો આપણે આ બધાને એક કાર્યવાહી કરવા યોગ્ય વર્કફ્લોમાં જોડીએ જેને તમે તમારા પ્રોજેક્ટ્સ પર લાગુ કરી શકો છો.
- ઓડિટ: એક બેઝલાઇનથી શરૂ કરો. તમારી વર્તમાન સ્થિતિને સમજવા માટે તમારા પ્રોડક્શન બિલ્ડ પર લાઇટહાઉસ રિપોર્ટ અને પર્ફોર્મન્સ પ્રોફાઇલ ચલાવો. તમારા FCP, LCP, TTI ની નોંધ લો, અને કોઈપણ લાંબા ટાસ્ક અથવા રેન્ડર-બ્લોકિંગ રિસોર્સિસને ઓળખો.
- ઓળખો: ડેવટૂલ્સના નેટવર્ક અને પર્ફોર્મન્સ ટેબ્સમાં ઊંડા ઉતરો. ચોક્કસપણે કઈ સ્ક્રિપ્ટ્સ અને સ્ટાઇલશીટ્સ પ્રારંભિક રેન્ડરને અવરોધિત કરી રહી છે તે શોધી કાઢો. દરેક રિસોર્સ માટે પોતાને પૂછો: "શું આ વપરાશકર્તાને પ્રારંભિક કન્ટેન્ટ જોવા માટે સંપૂર્ણપણે જરૂરી છે?"
- પ્રાથમિકતા આપો: તમારા પ્રયત્નોને તે કોડ પર કેન્દ્રિત કરો જે above-the-fold કન્ટેન્ટને અસર કરે છે. ધ્યેય આ કન્ટેન્ટને વપરાશકર્તા સુધી શક્ય તેટલી ઝડપથી પહોંચાડવાનો છે. બીજું કંઈપણ પછીથી લોડ કરી શકાય છે.
- ઓપ્ટિમાઇઝ કરો:
- બધી બિન-આવશ્યક સ્ક્રિપ્ટ્સ પર `defer` લાગુ કરો.
- સ્વતંત્ર તૃતીય-પક્ષ સ્ક્રિપ્ટ્સ માટે `async` નો ઉપયોગ કરો.
- તમારા રૂટ્સ અને મોટા કમ્પોનન્ટ્સ માટે કોડ સ્પ્લિટિંગ લાગુ કરો.
- ખાતરી કરો કે તમારી બિલ્ડ પ્રક્રિયામાં મિનિફિકેશન અને ટ્રી શેકિંગ શામેલ છે.
- તમારા સર્વર પર Brotli અથવા Gzip કમ્પ્રેશન સક્ષમ કરવા માટે તમારી ઇન્ફ્રાસ્ટ્રક્ચર ટીમ સાથે કામ કરો.
- CSS માટે, પ્રારંભિક વ્યૂ માટે જરૂરી ક્રિટિકલ CSS ને ઇનલાઇન કરવાનું અને બાકીનાને લેઝી-લોડ કરવાનું વિચારો.
- માપો: ફેરફારો લાગુ કર્યા પછી, ફરીથી ઓડિટ ચલાવો. તમારા નવા સ્કોર્સ અને સમયને બેઝલાઇન સાથે સરખાવો. શું તમારો FCP સુધર્યો છે? શું ઓછા રેન્ડર-બ્લોકિંગ રિસોર્સિસ છે?
- પુનરાવર્તન કરો: વેબ પર્ફોર્મન્સ એ એક-વખતનો સુધારો નથી; તે એક ચાલુ પ્રક્રિયા છે. જેમ જેમ તમારી એપ્લિકેશન વધે છે, તેમ તેમ નવી પર્ફોર્મન્સ અવરોધો ઉભરી શકે છે. પર્ફોર્મન્સ ઓડિટિંગને તમારા ડેવલપમેન્ટ અને ડિપ્લોયમેન્ટ ચક્રનો નિયમિત ભાગ બનાવો.
નિષ્કર્ષ: પર્ફોર્મન્સના માર્ગમાં નિપુણતા મેળવવી
ક્રિટિકલ રેન્ડરિંગ પાથ એ બ્લુપ્રિન્ટ છે જેનું બ્રાઉઝર તમારી એપ્લિકેશનને જીવંત કરવા માટે અનુસરે છે. ડેવલપર્સ તરીકે, આ પાથ પર આપણી સમજણ અને નિયંત્રણ, ખાસ કરીને જાવાસ્ક્રિપ્ટના સંદર્ભમાં, વપરાશકર્તા અનુભવ સુધારવા માટે આપણી પાસેના સૌથી શક્તિશાળી લિવર્સમાંથી એક છે. ફક્ત કામ કરે તેવા કોડ લખવાના માનસિકતાથી પર્ફોર્મન્સ આપે તેવા કોડ લખવા તરફ આગળ વધીને, આપણે એવી એપ્લિકેશન્સ બનાવી શકીએ છીએ જે ફક્ત કાર્યાત્મક જ નહીં પરંતુ વિશ્વભરના વપરાશકર્તાઓ માટે ઝડપી, સુલભ અને આનંદદાયક પણ હોય.
આ યાત્રા વિશ્લેષણથી શરૂ થાય છે. તમારા ડેવલપર ટૂલ્સ ખોલો, તમારી એપ્લિકેશનનું પ્રોફાઇલ કરો, અને તમારા વપરાશકર્તા અને સંપૂર્ણ રેન્ડર થયેલા પેજ વચ્ચે ઉભા રહેલા દરેક રિસોર્સ પર પ્રશ્ન કરવાનું શરૂ કરો. સ્ક્રિપ્ટ્સને `defer` કરવાની, કોડને વિભાજીત કરવાની, અને તમારા પેલોડને ઘટાડવાની વ્યૂહરચનાઓ લાગુ કરીને, તમે બ્રાઉઝરને તે શ્રેષ્ઠ રીતે જે કરે છે તે કરવા માટે માર્ગ સાફ કરી શકો છો: વીજળીની ઝડપે કન્ટેન્ટ રેન્ડર કરવું.